<template>
  <div>
    <swiper :options="swiperOptions"> 
      <swiper-slide>
        <img class="w-100" src="../assets/images/nav-1.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/nav-2.jpg" alt="">
      </swiper-slide>
       <swiper-slide>
        <img class="w-100" src="../assets/images/nav-3.jpg" alt="">
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right px-3 pb-2"
       slot="pagination"></div>
    </swiper>
    <!-- end of swiper -->
    <div class="nav-icons bg-white mt-3  text-center pt-3 text-dark-1">
      <div class="d-flex flex-wrap">
        <div class="nav-item mb-3" v-for="n in 10" :key="n">
        <i class="sprite sprite-news"></i>
        <div class="py-2">爆料站</div>
      </div>
      </div>
      <div class="bg-light py-2 fs-sm mr-1 d-flex ai-center jc-center">
        <i class="sprite sprite-arrow mr-1"></i>
        收起</div>
    </div>
    <!-- end of nav icons -->

    
    <m-list-card icon="Menu" title="新闻资讯" :categories="newsCats">
      <template #items="{category}">
          <router-link
          tag="div"
          :to="`/articles/${news._id}`"
           class="py-2 fs-lg d-flex" v-for="(news, i) in category.newsList" :key="i">
            <span class="text-info">[{{news.categoryName}}]</span>
            <span class="px-2">|</span>
            <span class="flex-1 text-dark-1 text-ellipse pr-2">{{news.title}}</span>
            <span class="text-gray-1 fs-sm">{{news.createdAt | date}}</span>
          </router-link>
      </template>
    </m-list-card>


    <m-list-card icon="card-hero" title="英雄列表" :categories="heroCats">
      <template #items="{category}">
        <div class="d-flex flex-wrap" style="margin: 0 -0.5rem;">
          <router-link 
          tag='div'
          :to="`/heroes/${hero._id}`"
          class="p-2 text-center" style="width: 20%;" v-for="(hero, i) in category.heroList" :key="i">
            <img :src="hero.avatar" class="w-100" alt="">
            <div>{{hero.name}}</div>
          </router-link>
        </div>
          
      </template>
    </m-list-card>
    <m-card icon="menu1" title="精彩视频"></m-card>
    <m-card icon="menu1" title="图文攻略"></m-card>
    <p></p>
    <i class="iconfont icon-news text-primary"></i>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  filters: {
    date(val) {
      return dayjs(val).format('MM/DD')
    }
  },
  data() {
    return {
      swiperOptions: {
          pagination: {
            el: '.pagination-home'
          },
          // Some Swiper option/callback...
        },
        newsCats: [],
        heroCats: []
    }
  },
  methods: {
    async fetchNewsCats(){
      const res = await this.$http.get('news/list')
      this.newsCats = res.data
    },
    async fetchHeroCats(){
      const res = await this.$http.get('heroes/list')
      this.heroCats = res.data
    }
  },
  created(){
    this.fetchNewsCats();
    this.fetchHeroCats();
  },
  components: {

  }
}
</script>
<style lang="scss">
@import '../assets/scss/variables';
.pagination-home{
  .swiper-pagination-bullet {
     opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, 'white' );
    &.swiper-pagination-bullet-active {
      background:map-get($colors, 'info' );
    }
  }
}

.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-item{
    width: 25%;
    border-left: 1px solid $border-color;
    &:nth-child(4n){
      border-left: none;
    }
  }
}
</style>
